<template> 
	<view class="registerContainer" >  
		<view class="marginTop"> 
			<view class="IDBox me-fx-row-start-c ">  
				<view class="loginID">登录账号</view> 
				<input class="phoneFont" placeholder="请输入手机号/账号" v-model="phone" />
			</view> 
			<view class="IDBox IDBoxMar me-fx-row-start-c">  
				<view class="loginPass">登录密码</view>
				<input class="password phoneFont" placeholder="请输入密码" v-model="password" type="password" />
				<text class="forgetPass" @click="forgetPassBtn"> 
					忘记密码   
				</text> 
			</view>   
		</view>  
		<view class="loginBnt" @click="loginBnt">登录</view>  
		<view class="otherRegisterBox"> 
			<view class="otherRegister">
				<view class="width"> 
					其他註冊方式
				</view>
				<view class="borderRadio">
 
				</view>
			</view>
			<view class='me-fx-row-sb-c registerloginPicBox'>
				<image src="../../static/img/weixinIcon.png" alt="" />
				<image src="../../static/img/qq1.png" alt="" /> 
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: '',
				password: '',
			}
		},
		created(){
		},
		methods: {
		
			forgetPassBtn() {
				uni.navigateTo({
					url: '../my/updatePass'
				})
			},
			loginBnt() {

				if (this.phone == '') {
					uni.showToast({
						title: '请输入手机号码',
						duration: 2000,
						icon: 'none'
					});
					return
				} else if (!(/^[1]([3-9])[0-9]{9}$/.test(this.phone))) {
					uni.showToast({
						title: '手机号码输入有误',
						duration: 2000,
						icon: 'none'
					});
					return
				} else if (this.password == '') {
					uni.showToast({
						title: '请输入密码',
						duration: 2000,
						icon: 'none'
					});
					return
				} else if (32 < this.password.length || this.password.length < 6) {
					uni.showToast({
						title: '请输入6-32位密码',
						duration: 2000,
						icon: 'none'
					});
					return
				} else {
					this.$u.post('/login', {
						mobile: this.phone,
						password: this.password
					}).then(res => {
						if (res) {
							uni.setStorageSync('token', 'Bearer ' + res.data.token, );
							uni.showToast({
								title: '登陆成功',
								duration: 1000,
								icon: 'none'
							});
							setTimeout(() => {
								uni.switchTab({
									url: '../indexPage/indexPage'
								})
							}, 2000)

						}
					}).catch((res) => {
						console.log(res, 'resfa')
					})
				}
			}
		}
	}
</script>

<style>
	
	.registerContainer {
		width: 100%;
		height: 100%;
		background-color: #F5F5F5;
	}

	.marginTop {
		padding-top: 20rpx;
	}

	.IDBox {
		position: relative;
		height: 98rpx;
		line-height: 98rpx;
		background: rgba(255, 255, 255, 1);
	}

	.IDBox input {
		font-size: 20rpx;
	}

	.phoneFont {
		font-size: 28rpx !important;
		color: rgba(153, 153, 153, 1);
		line-height: 64rpx;
	}

	.IDBox .loginID,
	.IDBox .loginPass {
		text-align: center;
		width: 160rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
		line-height: 64rpx;
	}

	.IDBoxMar {
		margin-top: 4rpx;
	}

	.loginBnt {
		width: 80%;
		margin: 147rpx auto;
		background-color: #007AFF;
		text-align: center;
		height: 88rpx;
		line-height: 88rpx;
		color: white;
		border-radius: 50rpx;
	}

	.otherRegisterBox {
		width: 100%;
		position: fixed;
		bottom: 10%;

	}

	.otherRegister {
		position: relative;
	}

	.width {
		width: 260rpx;
		text-align: center;
		position: relative;
		z-index: 999;
		padding: 0 20rpx;
		background-color: #F5F5F5;
		margin: auto;
	}

	.borderRadio {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 80%;
		height: 2rpx;
		border-radius: 50%;
		transform: translateX(-50%);
		background-color: #5C14FF;
	}

	.registerloginPicBox {
		width: 200rpx;
		height: 80rpx;
		margin: 40rpx auto;
	}

	.registerloginPicBox image {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;

	}

	.forgetPass {
		position: absolute;
		right: 10rpx;
		width: 130rpx;
		height: 46rpx;
		line-height: 46rpx;
		background: rgba(255, 255, 255, 1);
		border: 1rpx solid rgba(92, 20, 255, 1);
		border-radius: 23rpx;
		text-align: center;
		color: rgba(92, 20, 255, 1);
	}
</style>
